<style scoped>
.question-cell {
	padding-top: 10px;
}
.input-item {
    margin-left: 45px;
    width: 250px;
}

.input-item2 {
    margin-left: 45px;
    width: 275px;
}

.formitem {
    margin-left: 30px;
}
.option-cell {
    padding-top: 10px
}
.option-input {
    width: 300px;
    margin-left:45px
}
.option-other {
    display: inline-block;
    margin-left:45px;
    padding: 5px 0
}
</style>
<template>
	<div class="question-cell">
		<Form ref="formData" :model="formValidate" :rules="ruleValidate" inline>
            <FormItem label="标题" :label-width="100" prop="title">
                <Input class="input-item" placeholder="输入标题" v-model="formValidate.title"></Input>
			</FormItem>
<!-- 			<FormItem label="说明描述" :label-width="100" class="formitem" prop="memo">
				<Input class="input-item2" placeholder="输入说明描述" v-model="formValidate.memo"></Input>
			</FormItem>    -->           
		</Form>
        <RadioGroup v-model="right" vertical>
        <div class="option-cell" v-for="(item, index) in optionList">
            <Icon type="ios-remove-circle-outline" 
                style="width: 100px;text-align:right" size="24" color="#f00" @click="delOption(index)"/>

            <Input placeholder="选项..." class="option-input" v-model="optionList[index]"/>
            <Radio :label="index" style="display: inline-block;margin-left: 20px">
                <Icon type="social-apple"></Icon>
                <span>正确答案</span>
            </Radio>
        </div>
        </RadioGroup>
        <div class="option-cell" >
            <Button type="info" style="margin-left: 145px" @click="addOption" icon="md-add">添加选项</Button>
        </div>
	</div>
</template>
<script>
export default {
    props: {
        title: String,
        memo: String,
        selection : String,
        answer: String
    },
    data() {
        return {
            optionList: ['',''],
            formValidate: {
            	title: '',
                memo: '',
            },
            ruleValidate: {
            	title: [{
                    required: true,
                    message: '标题不能为空',
                    trigger: 'blur'
                }],
                memo: [{
                    required: false,
                    message: '说明不能为空',
                    trigger: 'blur'
                }],
            },
            right: 0
        }
    },
    watch: {
        title: function (newValue, oldValue) {
            this.formValidate.title = newValue
        },
        memo: function (newValue, oldValue) {
            this.formValidate.memo = newValue
        },
        selection: function (newValue, oldValue) {
            if (newValue.length > 0) {
                this.optionList = JSON.parse(newValue)  
            }
            else {
                this.optionList = ['','']
            }
        },
        right: function (newValue, oldValue) {
            this.$emit('update:answer', this.optionList[newValue])
        },
        formValidate: {
            handler(newValue, oldValue) {
    　　　　　　 console.log('watched')
                if (newValue.title != this.title) {
                    this.$emit('update:title', newValue.title)
                }
                if (newValue.memo != this.memo) {
                    this.$emit('update:memo', newValue.memo)
                }
    　　　　},
    　　　　deep: true
        },
        optionList: {
            handler(newValue, oldValue) {
                this.$emit('update:selection', JSON.stringify(newValue))
                this.$emit('update:answer', this.optionList[this.right])
            },
            deep: true
        }
    },
    created() {
        this.formValidate.title = this.title
        this.formValidate.memo = this.memo
        if (this.selection.length > 0) {
            this.optionList = JSON.parse(this.selection)
        }
        for (var i = 0; i < this.optionList.length; i++) {
            if (this.optionList[i] == this.answer) {
                this.right = i
                break
            }
        }
    },
    methods: {
        delOption(index) {
            console.log(index)
            if (this.optionList.length > 2) {
                this.optionList.splice(index, 1)
            }
            else {
                this.$Modal.info({title: "注意",content: "至少保留两个选项！"})
            }
            if (this.optionList.length < this.right) {
                this.$emit('update:answer', '')
            }
        },
        addOption(e) {
            this.optionList.push('')
        },
        radioChange(e) {
            console.log(e)
        }
    }
};
</script>
